<template>
    <div class="content">
        <div class="header">
            <h3 class="title">用户列表</h3>
            <el-button type="primary" @click="adduser">新建用户</el-button>
        </div>
        <div class="table">
            <el-table :data="usersList" border style="width: 100%">
                <el-table-column align="center" type="selection" width="50" />
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column align="center" prop="name" label="用户名" width="120px" />
                <el-table-column align="center" prop="realname" label="真实姓名" width="150px" />
                <el-table-column align="center" prop="cellphone" label="手机号" width="140px" />
                <el-table-column align="center" prop="enable" label="状态" width="80px">
                    <!--作用域插槽-->
                    <template #default="scope">
                        <el-tag :type="scope.row.enable ? 'primary' : 'danger'">
                            {{ scope.row.enable ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="createAt" label="创建时间" min-width="180px">
                    <template #default="scope">
                        {{ formatUTC(scope.row.createAt) }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="updateAt" label="更新时间" min-width="180px">
                    <template #default="scope">
                        {{ formatUTC(scope.row.updateAt) }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="150px" fixed="right">
                    <template #default="scope">
                        <el-button @click="handleEditBtnClick(scope.row)" size="small" icon="Edit" text
                            type="primary">编辑</el-button>
                        <el-button @click="handleDeleteBtnClk(scope.row.id)" size="small" icon="Delete" text
                            type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="true"
                layout="total,sizes,prev, pager, next" :total="systemStore.userTotalCount"
                @size-change="handleSizeChange" @current-change="handleCurChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import useSystemStore from '@/store/main/system/system';
import { storeToRefs } from 'pinia';
import { formatUTC } from '@/utils/format'
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';

// 定义事件
const emit = defineEmits(['newBtnClick', 'editBtnClick'])

// 1.发起action，请求userlist的数据
const systemStore = useSystemStore();
const currentPage = ref(1)
const pageSize = ref(10)
fetchUserListData()

// 2.获取userList数据，进行展示
const { usersList } = storeToRefs(systemStore)

// 3.页码相关的逻辑

function handleSizeChange() {
    fetchUserListData()
}
function handleCurChange() {
    fetchUserListData()
}

// 4.定义函数，用于发送网络请求
function fetchUserListData(formData: any = {}) {
    // 1.获取offset/size
    const size = pageSize.value;
    const offset = (currentPage.value - 1) * size;
    const info = { size, offset }

    // 2.发起网络请求
    const queryInfo = { ...info, ...formData }
    systemStore.postUserListAction(queryInfo)
}

// 5.删除的操作
function handleDeleteBtnClk(id: number) {
    ElMessageBox.confirm(
        '确认删除该条数据吗?',
        '删除数据',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        systemStore.delUserByIdAction(id)
        ElMessage({
            type: 'success',
            message: '删除用户成功~',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })

}
// 编辑的操作
function handleEditBtnClick(itemData: any) {
    emit('editBtnClick', itemData)
}

// 6.新建用户
function adduser() {
    emit('newBtnClick')
}

defineExpose({ fetchUserListData })
</script>

<style lang="less" scoped>
.content {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;

    .title {
        font-size: 20px;
    }
}

.table {
    :deep(.el-table__cell) {
        padding: 12px 0;
    }

    .el-button {
        margin-left: 0;
        padding: 5px 8px;
    }
}

.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
</style>
